<template>
	<view class="seting">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">设置</view>
			</template>
		</uv-navbar>
		<view class="list">
			<view class="avatar" @click="uploadImage">
				<image :src="user_info.head_portrait"></image>
				<text>修改头像</text>
			</view>
			<view class="item">
				<view class="key">昵称</view>
				<input type="text" v-model="user_info.nickname" class="input">
				<image src="@/static/images/r3.png"></image>
			</view>
			<view class="item">
				<view class="key">手机号</view>
				<input type="text" v-model="user_info.phone" class="input">
				<image src="@/static/images/r3.png"></image>
			</view>
			<view class="item" @click="open">
				<view class="key">出生日期</view>
				<view class="input">{{user_info.birthday}}</view>
				<image src="@/static/images/r3.png"></image>
			</view>
			<view class="item">
				<view class="key">性别</view>
				<view class="checkbox">
					<view class="cell" @click="user_info.sex=1">
						<image src="@/static/images/s5.png" v-if="user_info.sex==1"></image>
						<image src="@/static/images/s6.png" v-else></image>
						<text>男</text>
					</view>
					<view class="cell" @click="user_info.sex=2">
						<image src="@/static/images/s5.png" v-if="user_info.sex==2"></image>
						<image src="@/static/images/s6.png" v-else></image>
						<text>女</text>
					</view>
				</view>
			</view>
			<view class="submit">
				<view @click="submit">确认</view>
			</view>
		</view>
		<uv-calendars ref="calendars" lunar title="选择生日" color="#CA1C1D" confirmColor="#CA1C1D" @confirm="confirm" />
	</view>
</template>

<script setup>
	import {
		userInfo,
		userEdit,
		upload
	} from "@/request/api";

	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef
	} from "vue";

	const calendars = shallowRef();
	const open = () => calendars.value.open();
	const confirm = (e) => user_info.value.birthday = e.fulldate;

	const uploadImage = () => {
		uni.chooseImage({
			success: async (res) => {
				let tempFilePaths = res.tempFilePaths;
				let filePath = tempFilePaths[0];
				let {
					src
				} = await upload({
					filePath
				});
				user_info.value.head_portrait = src;
			}
		})
	};

	const user_info = ref({
		head_portrait: "",
		nickname: "",
		phone: "",
		birthday: "",
		sex: "",
	});
	const getUserInfo = async () => {
		let {
			user
		} = await userInfo();
		user_info.value = user;
	};
	const submit = async () => {
		await userEdit(user_info.value);
		uni.$uv.toast("操作成功");
	};
	onShow(() => getUserInfo());
</script>

<style scoped lang="scss">
	.seting {
		height: calc(100vh - var(--window-top) - var(--window-bottom));

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.list {
			padding: 0 30rpx;
			box-sizing: border-box;

			.avatar {
				height: 188rpx;
				border-bottom: 1px solid #EEEEEE;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
				}

				text {
					color: #666666;
					font-size: 30rpx;
					padding-left: 80rpx;
					box-sizing: border-box;
				}
			}

			.item {
				height: 100rpx;
				border-bottom: 1px solid #EEEEEE;
				padding-right: 10rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.key {
					width: 154rpx;
					color: #999999;
					font-size: 30rpx;
				}

				.input {
					flex: 1;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}

				.checkbox {
					display: flex;
					align-items: center;

					.cell {
						margin-left: 120rpx;

						&:first-child {
							margin-left: 0;
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}

						text {
							color: #111111;
							font-size: 30rpx;
							padding-left: 12rpx;
							box-sizing: border-box;
						}
					}
				}
			}

			.submit {
				margin-top: 60rpx;
				padding: 0 10rpx;
				box-sizing: border-box;

				view {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
					background: #CA1C1D;
				}
			}
		}
	}
</style>